<template>
  <div class="account-container">
    <h2 class="title">账号信息</h2>
    <el-tabs
      v-model="activeName"
    >
      <el-tab-pane
        label="基本资料"
        name="first"
      >
        <el-form
          :model="form"
          label-width="68px"
          :rules="rules"
        >
          <el-form-item
            prop="account"
            label="用户账号"
          >
            <el-input
              :disabled="true"
              v-model="form.account"
            />
          </el-form-item>
          <el-form-item
            prop="username"
            label="用户名"
          >
            <el-input v-model="form.username" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        label="修改密码"
        name="second"
      >
        <el-form
          :model="form"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item
            prop="oldPassword"
            label="请输入旧密码"
          >
            <el-input
              type="password"
              v-model="form.oldPassword"
            />
          </el-form-item>
          <el-form-item
            prop="newPassword"
            label="请输入新密码"
          >
            <el-input
              type="password"
              v-model="form.newPassword"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button
      style="color:black!important"
      @click="goBack"
    >取消</el-button>
    <el-button
      type="primary"
      @click="submitForm"
    >确定</el-button>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { modifyInfo, modifyPassword } from "@/api/account";
import { validateContent, validatePassword } from "@/utils/validate";
import { Message } from 'element-ui'
export default {
  name: 'Account',
  mixins: [ResizeMixin],
  data () {
    return {
      form: {
        username: '',
        account: this.$store.getters.account,
        oldPassword: '',
        newPassword: '',
      },
      activeName: 'first',
      rules: {
        username: [
          { validator: validateContent, trigger: 'blur' }
        ],
        oldPassword: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        newPassword: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (ruleForm) {
      if (this.activeName === "first") {
        modifyInfo({account:this.form.account,name:this.form.username}).then(res => {
         Message({
          message:res.message||'修改成功',
          type:'success',
          duration: 2 * 1000
         })
        }).catch(err => {
          console.log(err);
        })
      }
      if (this.activeName === "second") {
        modifyPassword({account:this.form.account,oldPassword:this.form.oldPassword,newPassword:this.form.newPassword}).then(res => {
           Message({
          message:res.message||'修改成功',
          type:'success',
          duration: 2 * 1000
         })
        }).catch(err => {
          console.log(err);
        })
      }
    }
    ,
    goBack () {
      this.$router.push({ path: "/customer" })
    },
    getAccount () {

    }
  }
}
</script>

<style scoped>
.account-container {
  min-height: 90vh;
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: 5px;
}
@media screen and (max-width: 47.0624rem) {
  .account-container {
    margin: 0;
    height: 94vh;
  }
}
</style>